<template>
  <div class="news">
    <div class="news_head">
      <p class="content4 color1 fontBold line25">
        {{ data.title }}
      </p>
      <div class="flex justify_between align_center font400 color6 content2">
        <p>{{ data.create_time }}</p>
        <p>浏览量 ：{{ data.onclick }}</p>
      </div>
    </div>
    <div class="news_content content3 color3 font400" v-html="data.content" />
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div class="font400 content3 color4" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div>
      <div class="font400 content3 color4" @click="share">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang" />
        </svg>
        <p class="content2 font400 color3">
          分享
        </p>
      </div>
      <div class="font400 content3 color4" @click="submit">
        <svg class="icon" aria-hidden="true" v-if="data.is_sign == 0">
          <use xlink:href="#icon-dianzan1" />
        </svg>
        <svg class="icon" aria-hidden="true" v-if="data.is_sign == 1">
          <use xlink:href="#icon-dianzan2" />
        </svg>
        <p class="content2 font400 color3">
          {{ data.is_sign == 1 ? "取消" : "点赞" }}
        </p>
      </div>
    </div>
  </div>
  <van-overlay :show="show" @click="show = false" z-index="10">
    <div class="wrapper">
      <div class="block flex align_center justify_center">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-dianzan3" />
        </svg>
        <p class="font400 content2 color2">
          感谢您的点赞
        </p>
      </div>
    </div>
  </van-overlay>
  <Loading :visible="visible" :share-img="shareImg" @closeLoading="closeLoading" />
</template>

<script setup lang="ts">
import { Toast } from 'vant'
import { ref, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { newsDetail, newsSignUp, newsShare } from '@/api'
import emiter from '@/service/mitt'
const Loading = defineAsyncComponent(
  () => import('@/components/Loading/index.vue')
)
const show: any = ref(false)
const visible: any = ref(false)
const shareImg: any = ref('')
const data: any = ref([])
const router = useRouter()
const route = useRoute()
const store = useStore()

onMounted(() => {
  document.body.style.background = '#fff'
})

onUnmounted(() => {
  document.body.style.background = '#f7f7f7'
})

const getData = async () => {
  data.value = await newsDetail({ news_id: route.query.id })

  const str1 = ' style="height: 100%"; '
  let str2 = data.value.content
  const str3 = '<img '
  var ary = str2.split(str3)
  for (let i = 0; i < ary.length; i++) {
    if (i >= 1) {
      // 将数组的第二个元素前拼上str1
      // ary[1] = str1 + ary[1];
      ary[i] = str1 + ary[i]
      // 再用str3做为分隔符将数组拼成字符串
      // str2 = ary.join(str3);
    }
  }
  str2 = ary.join(str3)
  data.value.content = str2

  const str_flex1 = ''
  // let str2 = data.value.content
  const str_flex3 = 'flex: 0 0 auto'
  ary = str2.split(str_flex3)
  for (let i = 0; i < ary.length; i++) {
    if (i >= 1) {
      // 将数组的第二个元素前拼上str1
      // ary[1] = str1 + ary[1];
      ary[i] = str_flex1 + ary[i]
      // 再用str3做为分隔符将数组拼成字符串
      // str2 = ary.join(str3);
    }
  }
  str2 = ary.join('flex:auto')
  data.value.content = str2
}

getData()

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/home')
  }
}

const closeLoading = async () => {
  visible.value = false
}

const submit = async () => {
  try {
    await newsSignUp({ news_id: route.query.id })
    getData()
    const signObj = { id: route.query.id, is_sign: data.value.is_sign === 0 ? 1 : 0 }
    emiter.emit('like', signObj)
    if (data.value.is_sign === 0) {
      show.value = true
      setTimeout(() => {
        show.value = false
      }, 2000)
    }
  } catch (error: any) {
    Toast(error.message)
  }
}

const share = async () => {
  try {
    visible.value = true
    await newsShare({
      news_id: route.query.id,
      web_url: encodeURIComponent(window.location.href)
    })
    shareImg.value = `${import.meta.env.VITE_API_BASEURL
      }v1/news/share?news_id=${route.query.id}&web_url=${encodeURIComponent(
        window.location.href
      )}`
  } catch (error: any) {
    Toast(error.message)
  }
}
</script>

<style lang="less" scoped>
.news {
  padding: 20px 15px 80px;

  .news_head {
    margin-bottom: 20px;

    div {
      margin-top: 15px;
    }
  }

  .news_content {
    line-height: 25px;
    word-break: break-all;

    ::v-deep hr,
    ::v-deep img,
    ::v-deep table {
      width: 100% !important;
      object-fit: contain;
      margin: auto !important;
    }
  }
}

.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

  .footer_btn {
    padding: 0 60px;
    height: 100%;
    text-align: center;

    .agree {
      width: 240px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }

    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .block {
    width: 200px;
    height: 50px;
    background: #ffffff;
    border: 1px solid #eef1f7;
    box-shadow: 0px 0px 8px 0px rgba(22, 12, 6, 0.1);
    border-radius: 10px;

    .icon {
      width: 24px;
      height: 24px;
      margin-right: 4px;
    }

    p {
      line-height: 27px;
      height: 27px;
      margin-top: 6px;
    }
  }
}

@media (min-width: 750px) {
  .news {
    padding: 20px 15px 80px;

    .news_head {
      margin-bottom: 20px;

      div {
        margin-top: 15px;
      }
    }

    .news_content {
      line-height: 25px;
      word-break: break-all;

      &:deep(img, hr, table) {
        width: 100% !important;
      }
    }
  }

  .fexd_footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 375px;
    height: 70px;
    background-color: #fff;
    box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);

    .footer_btn {
      padding: 0 60px;
      height: 100%;
      text-align: center;

      .agree {
        width: 240px;
        height: 44px;
        background: #ff7a1f;
        border-radius: 5px;
        text-align: center;
        line-height: 44px;
      }

      .icon {
        width: 23px;
        height: 23px;
        margin-bottom: 2px;
      }
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    .block {
      width: 200px;
      height: 50px;
      background: #ffffff;
      border: 1px solid #eef1f7;
      box-shadow: 0px 0px 8px 0px rgba(22, 12, 6, 0.1);
      border-radius: 10px;

      .icon {
        width: 24px;
        height: 24px;
        margin-right: 4px;
      }

      p {
        line-height: 27px;
        height: 27px;
        margin-top: 6px;
      }
    }
  }
}
</style>
